<!--
 * @Author: Jackie
 * @Date: 2020-12-04 23:37:34
 * @FilePath: \vue_demo\vue_mina\src\components\Myicon.vue
 * @Copyright (C) 2020 Jackie. All rights reserved.
 * @Description: icon组件
-->

<template>
<div class="discover">
        <span class="barTotal">
                <span class="bar1 a1"></span>
                <span class="bar2 a2"></span>
                <span class="bar3 a3"></span>
                <span class="bar4 a4"></span>
                <span class="bar5 a5"></span>
        </span>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.discover{
        font-weight: 300;/*300=>让字体变细，因为设置好的字体300表示细字体，详见font.css*/
        color: #788188;
        -webkit-font-smoothing: antialiased;
        height: 40px;line-height: 40px;
        padding: 5px;
}
.barTotal{
/*设置整个icons的宽高，行内块元素，让span可以设置颜色显示*/
        width:20px;height:20px;
        display:inline-block !important;
        position: relative;/*父相子绝*/
}
.barTotal span{
/*设置每个span的宽度=每条bar的宽度*/
        position:absolute;/*父相子绝*/
        width:15%;
        bottom:0;
}
/*设置bar颜色、位置、高度*/
.bar1 {left: 0%;height: 60%;background-color: #545ca6;}

.bar2 {left: 20%;height: 45%;background-color: #1ab667;}

.bar3 {left: 40%;height: 90%;background-color: #4cb6cb;}

.bar4 {left: 60%;height: 60%;background-color: #fad733;}

.bar5 {left: 80%;height: 40%;background-color: #f05050;}
/*设置动画 infinite alternate both =>无效交替*/
.a1{
        -webkit-animation: ani1 1s infinite alternate both;
        -moz-animation:ani1 1s infinite alternate both;
        animation: ani1 1s infinite alternate both;
}
.a2{
        -webkit-animation: ani2 1s infinite alternate both;
        -moz-animation:ani2 1s infinite alternate both;
        animation: ani2 1s infinite alternate both;
}
.a3{
-webkit-animation: ani3 1s infinite alternate both;
-moz-animation:ani3 1s infinite alternate both;
animation: ani3 1s infinite alternate both;
}
.a4{
-webkit-animation: ani4 1s infinite alternate both;
-moz-animation:ani4 1s infinite alternate both;
animation: ani4 1s infinite alternate both;
}
.a5{
-webkit-animation: ani5 1s infinite alternate both;
-moz-animation:ani5 1s infinite alternate both;
animation: ani5 1s infinite alternate both;
}
/*匀速向下移动*/
@-webkit-keyframes ani1{
        0%{height:30%} 25%{height:50%} 50%{height:88%} 75%{height:30%} 100%{height:77%}
}
@-moz-keyframes ani1{
0%{height:30%} 25%{height:50%} 50%{height:88%} 75%{height:30%} 100%{height:77%}
}
@keyframes ani1{
0%{height:30%} 25%{height:50%} 50%{height:88%} 75%{height:30%} 100%{height:77%}
}

    @-webkit-keyframes ani2{
    0%{height:55%} 25%{height:35%} 50%{height:46%} 75%{height:27%} 100%{height:11%}
    }
    @-moz-keyframes ani2{
    0%{height:55%} 25%{height:35%} 50%{height:46%} 75%{height:27%} 100%{height:11%}
    }
    @keyframes ani2{
    0%{height:55%} 25%{height:35%} 50%{height:46%} 75%{height:27%} 100%{height:11%}
    }

@-webkit-keyframes ani3{
    0%{height:66%} 25%{height:77%} 50%{height:55%} 75%{height:25%} 100%{height:81%}
}
@-moz-keyframes ani3{
    0%{height:66%} 25%{height:77%} 50%{height:55%} 75%{height:25%} 100%{height:81%}
}
@keyframes ani3{
    0%{height:66%} 25%{height:77%} 50%{height:55%} 75%{height:25%} 100%{height:81%}
}

@-webkit-keyframes ani4{
0%{height:15%} 25%{height:18%} 50%{height:74%} 75%{height:63%} 100%{height:29%}
}
@-moz-keyframes ani4{
0%{height:15%} 25%{height:18%} 50%{height:74%} 75%{height:63%} 100%{height:29%}
}
@keyframes ani4{
0%{height:15%} 25%{height:18%} 50%{height:74%} 75%{height:63%} 100%{height:29%}
}

@-webkit-keyframes ani5{
0%{height:85%} 25%{height:75%} 50%{height:58%} 75%{height:63%} 100%{height:72%}
}
@-moz-keyframes ani5{
0%{height:85%} 25%{height:75%} 50%{height:58%} 75%{height:63%} 100%{height:72%}
}
@keyframes ani5{
0%{height:85%} 25%{height:75%} 50%{height:58%} 75%{height:63%} 100%{height:72%}
}

</style>

